import Vue from "vue"
import VueRouter from "vue-router"

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
/**
 * vue.use使用说明：
 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
 如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
 该方法需要在调用 new Vue() 之前被调用。
 当 install 方法被同一个插件多次调用，插件将只会被安装一次。
 * */
Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
import HelloWorld from "@/components/HelloWorld.vue";
// 可以从其他文件 import 进来
// const Foo = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }

// 路由懒加载
// api:https://v3.router.vuejs.org/zh/guide/advanced/lazy-loading.html
const pages = [
    { path: "/", name: "Hello Word", component: HelloWorld },
    // { path: "/foo", component: Foo },
    // { path: "/bar", component: Bar },
    {
        path: '/home',
        name: 'Echarts图表',
        component: resolve => void (require(['@/components/home'], resolve)),
        children: [
            {
                path: '',
                name: '入门示例',
                component: resolve => void (require(['@/components/echarts/demo'], resolve))
            },
            {
                path: 'timeline',
                name: 'timeline',
                component: resolve => void (require(['@/components/echarts/timeline'], resolve))
            },
            {
                path: 'line',
                name: '折线图',
                component: resolve => void (require(['@/components/echarts/line'], resolve))
            },
            {
                path: 'bar',
                name: '柱状图',
                component: resolve => void (require(['@/components/echarts/bar'], resolve))
            },
            {
                path: 'pie',
                name: '饼图',
                component: resolve => void (require(['@/components/echarts/pie'], resolve))
            },
            {
                path: 'scatter',
                name: '散点图/气泡图',
                component: resolve => void (require(['@/components/echarts/scatter'], resolve))
            },
            {
                path: 'radar',
                name: '雷达图',
                component: resolve => void (require(['@/components/echarts/radar'], resolve))
            },
            {
                path: 'funnel',
                name: '漏斗图',
                component: resolve => void (require(['@/components/echarts/funnel'], resolve))
            },
            {
                path: 'gauge',
                name: '仪表盘',
                component: resolve => void (require(['@/components/echarts/gauge'], resolve))
            },
            {
                path: 'heatmap',
                name: '热力图',
                component: resolve => void (require(['@/components/echarts/heatmap'], resolve))
            },
            {
                path: 'sunburst',
                name: '旭日图',
                component: resolve => void (require(['@/components/echarts/sunburst'], resolve))
            },
            {
                path: 'sankey',
                name: '桑基图',
                component: resolve => void (require(['@/components/echarts/sankey'], resolve))
            },
            {
                path: 'wordcloud',
                name: '词云图',
                component: resolve => void (require(['@/components/echarts/wordcloud'], resolve))
            },
            {
                path: 'tree',
                name: '树图',
                component: resolve => void (require(['@/components/echarts/tree'], resolve))
            },
            {
                path: 'treemap',
                name: '矩形树图',
                component: resolve => void (require(['@/components/echarts/treemap'], resolve))
            },
            {
                path: 'graph',
                name: '关系图',
                component: resolve => void (require(['@/components/echarts/graph'], resolve))
            }
        ]
    },
    {
        path: "/complex",
        name: "复杂动态可视化",
        icon: "el-icon-star-on",
        component: resolve => void (require(['@/components/complex'], resolve)),
        children: [
            {
                path: 'timeline',
                name: '动态可视化数据图',
                component: resolve => void (require(['@/components/complex/timeline'], resolve))
            },
            {
                path: 'dashboard1',
                name: '电商Dashboard',
                component: resolve => void (require(['@/components/complex/dashboard1'], resolve))
            },
            {
                path: 'dashboard2',
                name: '车联网Dashboard',
                component: resolve => void (require(['@/components/complex/dashboard2'], resolve))
            },
            {
                path: 'spider',
                name: '文本挖掘',
                component: resolve => void (require(['@/components/complex/spider'], resolve))
            },
            {
                path: 'richtext',
                name: '富文本',
                component: resolve => void (require(['@/components/complex/richtext'], resolve))
            },
            {
                path: 'loading',
                name: '异步加载',
                component: resolve => void (require(['@/components/complex/loading'], resolve))
            },
            {
                path: 'media',
                name: '响应式自适应',
                component: resolve => void (require(['@/components/complex/media'], resolve))
            },
            {
                path: 'event',
                name: '事件与行为',
                component: resolve => void (require(['@/components/complex/event'], resolve))
            },
            {
                path: 'gl',
                name: '三维散点图',
                component: resolve => void (require(['@/components/complex/gl'], resolve))
            }
        ]
    }
]

const router = new VueRouter({
    routes: pages
})

export default router